<template>
    <div class="box">
        <h3>激活路由控制</h3>
        <pre>
            激活路由：当前项目通过地址正在运行的路由组件
        </pre>
        <p>1.激活路由样式</p>
        <pre>
            对正在访问的路由组件地址对应的RouterLink组件进行样式描述；
            vue-router 模块提供 RouterLink 组件默认会根据当前访问的激活路由地址自动完成激活样式添加删除；
            但RouterLink 添加的激活样式只是样式名称，并没有实际的样式定义；
            所以样式需要开发者手动定义，自动添加的样式名为：router-link-active ， router-link-exact-active；
            路由模块提供的样式名称，可以在路由配置中通过 linkActiveClass , linkExactActiveClass 修改样式名；
            const router =  createRouter({
                linkActiveClass:"active",
                linkExactActiveClass:"exact-active"
            })；
            如果程序中的 RouterLink 采用了 custom 自定义标签模式，需要通过 RouterLink 的作用域分发获取激活状态；
                v-slot:default="{ isActive,isExactActive }"

            .router-link-active 是为了匹配所有被加载的路由组件对应的路由导航RouterLink;
            .router-link-exact-active 是为了准确描述被激活的路由导航对应的导航RouterLink;
        </pre>

        <p>2.激活路由信息对象</p>
        <pre>
            激活路由信息对象:路由模块提供用于记录当前正在被访问的路由组件的相关配置数据的对象；
            在vue-router模块加载后，使用createRouter方法创建的路由对象，在vue应用中通过 use 进行载入式，会完成vue全局属性数据的修改；
            vue全局属性数据上会被加载上$route对象，该对象就是 激活路由信息对象，vue路由模块的相关代码如下
            install(app) {
                ……
                Object.defineProperty(app.config.globalProperties, '$route', {
                    enumerable: true,
                    get: () => vue.unref(currentRoute),
                });
                ……
            }
            所以 $route 信息对象为只读对象，只能用于程序运行时的信息加载，但不能被修改;
            因为 $route 信息对是被直接定义在全局环境下的变量，所以在组件的模板中可以直接作为页面语法的取值变量进行使用
        </pre>
        <pre>{{ $route }}</pre>
        <input type="button" value="打印信息对象$route" @click="printRoute()">

        <p>3.激活路由的元信息对象</p>
        <pre>
            路由元信息：在路由配置时和路由定义一起被描述的固定信息数据
            路由对象设置时通过属性 meta:{} 进行描述
            路由的元信息数据只和当前路由存在关联关系
            元信息数据对象可以通过激活路由信息对象的方式被加载
        </pre>
        
    </div>
</template>

<script>
export default {
    methods:{
        printRoute(){
            console.log(this.$route);
        }
    }
}
</script>

<style lang="sass" scoped>

</style>